<template>
  <div class="inventory">
        <div class="top-add">
            <el-button size="mini" type="primary" @click="openSearch">查询盘点单</el-button>
            <!-- <el-button size="mini" class="pull-right"  style="margin-right:50px" type="primary" @click="outorderTable">导出</el-button> -->
            <el-button size="mini" class="pull-right" style="margin-right:50px" type="primary" @click="goAddInventoryOrder">新增盘点</el-button>
            
        </div>
        <!-- 查询搜索框 -->
      <el-row v-if="is_search" :gutter="16" style="line-height:40px;margin-top:-20px;margin-bottom:20px">
        <el-col :span="5">
          <div class="">
            <label for="">盘点单号：</label>
            <el-input v-model="inventory_num" size="small" placeholder="请输入盘点单号" style="width:80%"></el-input>
          </div>
        </el-col>
        
        <el-col :span="8">
          <div class="">
            <label for="">选择盘点日期：&nbsp;&nbsp;</label>
            <div>
              <el-date-picker
                size="small"
                v-model="inventory_date"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['12:00:00']" style="width:80%">
              </el-date-picker>
            </div>
          </div>
        </el-col>
        <el-col :span="2" style="margin-top:40px;">
          <el-button type="danger" size="mini" style="width:60px;margin-right:20px" @click="searchInvent">搜索</el-button>
        </el-col>
        <el-col :span="2" style="margin-top:40px;">
          <el-button type="danger" size="mini" style="width:60px" @click="clearSearch">清空</el-button>
        </el-col>

      </el-row>

      <el-row>
        <el-col :span="24">
          <el-table :data="inventoryList" border style="width: 100%" v-loading="inventLoading">
            <el-table-column prop="checkCode" label="调拨单号"></el-table-column>
            <el-table-column prop="checkPerson" label="制单人"></el-table-column>
            <el-table-column prop="username" label="盘点人"></el-table-column>
            <el-table-column prop="checkDate" label="盘点日期"></el-table-column>
            <el-table-column prop="closeDate" label="截至日期"></el-table-column>
            <el-table-column prop="checkRemark" label="备注"></el-table-column>
            <el-table-column label="操作"  width="390">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-edit-outline" @click="startInventory(scope.row)">开始盘点</el-button>
                <el-button size="mini" icon="el-icon-edit" @click="editInventory(scope.row)">修改</el-button>
                <el-button size="mini" icon="el-icon-document" @click="productView(scope.row)">生成报告</el-button>
                <el-button size="mini" icon="el-icon-delete" @click="delInventory(scope.row)">删除</el-button>
                <!-- <el-button size="mini" type="danger" @click="delInventory(scope.row)">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      

      <div class="autospace"></div>

      <el-row>
        <el-col :span="24">
          <el-pagination
            class="pull-left"
            background
            :hide-on-single-page="true"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total_num">
          </el-pagination>
        </el-col>
      </el-row>

  <excel style="display:none" :excelname="excelname" :outPutKey="outputKey" :tableData="inventoryList" :trueOutExecl.sync="trueOutExecl"></excel>
  </div>
</template>

<script>
import { GetInventoryOrder, GetInventoryOrderPage, DelInventoryOrder, SearchInventory } from '@/api/inventory';
import excel from '../test/excel';
export default {
  name: 'allot',
  components:{
    excel
  },
  data() {
    return {
        inventLoading: true,
        trueOutExecl: false,  // 确认是否导出
        outputKey: [], // 导出表格title
        excelname: '盘点详情',
        is_search: false,
        inventory_num: '',
        inventory_date: ['',''],
        inventoryList: [],
        // 分页
        pageNum: 1,
        pageSize: 8,
        total_num: null,
    }
    
  },
  mounted() {
    this.inventLoading = true;
    this.getInventoryOrders()
  },
  methods:{
    // 获取所有盘点单
    getInventoryOrders() {
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum
      }
      GetInventoryOrderPage(reqData).then( res => {
        let data = res.data.info;
        this.inventoryList = data.list;
        this.total_num = data.total;
        this.inventoryList.forEach( el => {
          el.checkDate = this.formatDate(el.checkDate);
          el.closeDate = this.formatDate(el.closeDate);
        })
         this.inventLoading = false;
      })
    },
    handleSizeChange(val) {
        
    },
    handleCurrentChange(val) {
      this.inventLoading = true;
      this.pageNum = val;
      this.getInventoryOrders()
    },
    // 导出表格
    outorderTable() {
      this.trueOutExecl = !this.trueOutExecl;
      this.outputKey = [{
            prodImg: '装备图片',
            prodCode: '装备编号',
            prodName: '装备名称',
            stockNum: '库存数',
            emit: '单位',
            prodPrice: '价格',
            areaName: '库区',
            departmentCode: '库位',
            prodDate: '到期时间'
      }]
    },
    // 点击查询按钮打开下拉框
    openSearch() {
        this.is_search = !this.is_search;
    },
    clearSearch() {
        this.inventory_num = '';
        this.inventory_date = ['',''];
    },
    searchInvent() {
      if (this.inventory_date[0]) {
        this.inventory_date[0] = this.formatDate(this.inventory_date[0]);
        this.inventory_date[1] = this.formatDate(this.inventory_date[1]);
      }
      let reqData = {
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        beginTime: this.inventory_date[0],
        endTime: this.inventory_date[1],
        checkCode: this.inventory_num,
      }
      SearchInventory(reqData).then( res => {
        let data = res.data.info;
        this.inventoryList = data.list;
        this.total_num = data.total;
        this.inventoryList.forEach( el => {
          el.checkDate = this.formatDate(el.checkDate);
          el.closeDate = this.formatDate(el.closeDate);
          this.inventLoading = false;
        })
      })
    },
    goAddInventoryOrder() {
        this.$router.push('/addinventory')
    },
    delInventory(el) {
      
      this.confirm({
        fn: (id) => {
          this.inventLoading = true;
           DelInventoryOrder(id).then( res => {
              let data = res.data
              this.$message({
                  message: data.msg,
                  type: 'success'
              })
              this.getInventoryOrders()
            })
        },
        id: el.checkId,
        content: '此操作将删除当前信息, 是否继续?',
      });
    },
  
    // 开始盘点
    startInventory(data) {

    },
    editInventory(data) {
        this.$router.push({
          path: '/addinventory',
          query: { checkId: data.checkId }
        })
    },
    // 生成报告
    productView(data) {

    }
  },

  
}
</script>

<style lang="scss" scoped>
@import '../../styles/config.scss';

  .label-wrap {
    &.category { @include labelwrap(left,100,40); }
    &.date {
      @include labelwrap(center,50,40); }
    &.keyword { @include labelwrap(right,110,40); }
  }
  .autospace {
    height: 30px;
  }
  
  .top-add {
    width: 100%;
    height: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f1f1f1;
  }
</style>
  
